<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>超市订单管理系统</title>
    <base href="${pageContext.request.contextPath}/"/>
    <link rel="stylesheet" href="webjars/iview/3.4.0/dist/styles/iview.css">
    <script src="webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="webjars/iview/3.4.0/dist/iview.js"> </script>
    <script src="webjars/axios/0.18.0/dist/axios.js"></script>
    <style>
	.layout{
	    border: 1px solid #d7dde4;
	    background: #f5f7f9;
	    position: relative;
	    border-radius: 4px;
	    overflow: hidden;
	}
	.layout-logo{
	    width: 350px;
	    margin-left: 30px;
	    float: left;
	    position: relative;
	    color: white;
	}
	.layout-nav{
		align: right;
	    width: 420px;
	    margin-right: 20px;
	    float: right;
	    color: white;
	    font-size: 20px;
	}
    .collapsed-menu{
        background-color:#000 !important;
    }
    </style>
</head>
<body>
<div id="root">
    <div class="layout">
        <Layout>
            <Header>
                <i-Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo">
                        <h1>超市订单管理系统</h1>
                    </div>
                    <div class="layout-nav">
                    	欢迎  ${userSession.userName } 登录
                        <i-button type="primary" @click="logout()">退出</i-button>
                    </div>
                </i-Menu>
            </Header>
            <Layout>
                <Sider collapsible collapsible-width="2%" :class="menuitemClasses" v-model="isCollapsed" :style="{background: '#fff'}">
                    <i-Menu theme="light" width="auto" active-name="1-3" :open-names="['1']">
		                <menu-item name="1">
		                    <icon type="ios-paper" ></Icon><a href="http://www.baidu.com" target="main">订单管理</a>
		                </menu-item>
		                <menu-item name="2">
		                    <icon type="ios-people"></Icon>供应商管理
		                </menu-item>
                        <submenu name="3">
                            <template slot="title">
                                <icon type="md-keypad"></icon>系统管理
                            </template>
                            <menu-item v-for="m in menus" :name="m.id">
                                <a :href="m.url" target="main">{{m.name}}</a>
                            </menu-item>
                        </submenu>

                    </i-Menu>
                </Sider>
                <Layout :style="{padding: '0px 0px 0px 0px'}">
                    <i-Content :style="{padding: '0px', minHeight: '490px', background: '#fff'}">
                        <iframe name="main" width="100%" height="535" frameborder="0"></iframe>
                    </i-Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            menus:[],
            isCollapsed: false
        },
        computed: {
            menuitemClasses: function () {
            	console.log('collapsed=' + this.isCollapsed);
                return this.isCollapsed ? 'collapsed-menu' : '';
            }
        },
        methods:{
            logout(){
                location.href = "${pageContext.request.contextPath}/jsp/logout";
            },
            createMenu(){
                axios.get("${pageContext.request.contextPath}/jsp/createMenu")
                    .then(({data})=>{
                    	console.log(data);
                        this.menus=data.result;
                    });
            }
        },
        mounted(){
            this.createMenu();
        }
    })
</script>
</body>
</html>
